<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 第一：下载 Layui 框架，并拷贝到项目中 -->
    <!-- 第二：导入 Layui 提供的 CSS 样式 -->
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>


<!-- 修改商品表单 -->
<div id="updateContainer" style="display: none">
    <form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

        <div class="layui-form-item">
            <label class="layui-form-label">商品编号</label>
            <div class="layui-input-block">
                <input type="text" id="update-productId" name="productId"
                       autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" id="update-productName" name="productName"
                       autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品类型</label>
            <div class="layui-input-block">
                <select name="productType" id="update-type" lay-filter="type" lay-search="">
                    <option value="">请选择类型</option>
                    <option value="a">a</option>
                    <option value="v">v</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="text" id="update-productPrice" name="productPrice"
                       autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" id="update-productStatus1" name="productStatus"
                       value="1" title="上架" checked>
                <input type="radio" id="update-productStatus2" name="productStatus"
                       value="0" title="下架">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                    <textarea id="update-productDesc"
                              name="productDesc"
                              placeholder="请输入内容"
                              class="layui-textarea">
                    </textarea>
            </div>
        </div>
    </form>
</div>

<button id="aa">AA</button>


<!-- 第三：导入 Layui 提供的 js 脚本文件 -->
<script src="layui/layui.js"></script>

<script src="js/a.js"></script>

<script>
    layui.use(['layer', 'jquery'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;

        $("#aa").click(function (){
            layer.open({
                type: 1,
                title: "123",
                content: $("#updateContainer"), // 使用 .html() 方法来复制模板内容
                area: ['60%', '35em'],
                btn: ["确定", "取消"],
                success: function(layero, index) {
                    // 弹层成功打开后可以执行一些初始化操作（如隐藏某些字段）
                },
                btn1: function (index, layero) {
                    // 在点击“确定”按钮时重新序列化弹层内的表单数据
                    var FormData = $(layero).find("#updateForm").serialize();
                    console.log( FormData); // 输出最新序列化的表单数据

                    // 这里你可以继续处理你的 AJAX 请求或者其他逻辑
                    /*
                    $.ajax({
                        url: "your_endpoint_here",
                        type: "POST", // 注意这里使用 POST 方法可能更合适
                        data: FormData,
                        success: function(response) {
                            console.log(response);
                            if (response.success) {
                                layer.msg("操作成功");
                            } else {
                                layer.msg("操作失败");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error("请求失败：" + textStatus + ", " + errorThrown);
                            layer.msg("操作失败，请检查输入信息");
                        }
                    });
                    */

                    // 关闭弹层
                    layer.close(index);
                }
            });
        });
    });
</script>
</body>
</html>
</body>
</html>